<template>
  <div class="stat-card">
    <div class="card-title">{{ title }}</div>
    <div class="card-value">{{ value }}</div>
    <div class="card-change" :class="change.direction">
      <i
        :class="
          change.direction === 'up'
            ? 'iconfont icon-arr-up red'
            : 'iconfont icon-arr-down green'
        "
      ></i>
      {{ change.value }}%
    </div>
    <div class="card-icon" :style="{ backgroundColor: color }">
      <i :class="`iconfont ${icon}`"></i>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: String,
  value: [String, Number],
  change: {
    type: Object,
    default: () => ({ value: 0, direction: "up" }),
  },
  icon: String,
  color: String,
});
</script>

<style scoped lang="less">
.stat-card {
  border-radius: var(--v-card-radius);
  box-shadow: var(--v-shadow);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  background-color: var(--v-card-bg);
  border: 1px solid var(--v-border-color);
  color: var(--v-text);
}

.stat-card:hover {
  transform: translateY(-5px);
}

.card-title {
  font-size: 15px;
  color: var(--v-text);
  margin-bottom: 10px;
}

.card-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--v-text-darker);
  margin-bottom: 15px;
}

.card-change {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  .green {
    color: var(--v-success);
  }
  .red {
    color: var(--v-danger);
  }
}

.card-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: var(--v-card-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
}
</style>
